<template>
  <div>
    <div class="clearFloat">
      <!-- 左边树状图 -->
      <div class="left leftFloat">
        <!-- <el-input v-model="a" placeholder="请输入系统名称"></el-input> -->
        <el-tree
          class="roundy-10 shadow"
          style="
            margin-top: 10px;
            margin-left: 5px;
            height: 700px;
            background-color: white;
            overflow: hidden;
          "
          :data="treeData"
          :props="props"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>
      <!-- 右边信息 -->
      <div class="right rightFloat" v-if="currentDatabase">
        <!-- 上面数据库信息 -->
        <table style="width: 100%">
          <tbody>
            <tr style="text-align: center">
              <td>数据库名：{{ currentDatabase?.dbName }}</td>
              <td>表总共（个）：{{ currentDatabase.tables?.tableCount }}</td>
              <td>视图总共（个）：{{ currentDatabase.tables?.viewCount }}</td>
            </tr>
          </tbody>
        </table>
        <!-- 分割线 -->
        <hr style="margin-top: 30px" />
        <div
          style="
            transform: translate(400px, -15px);
            background-color: rgba(227, 239, 250, 0.6);
            width: 60px;
            font-size: 20px;
            text-align: center;
          "
        >
          查询
        </div>

        <!-- 下面查询 -->
        <table style="width: 100%">
          <tbody>
            <tr style="text-align: center">
              <td>
                表/视图中文名：
                <el-input
                  style="display: inline-block"
                  v-model="input.chineseName"
                  placeholder="请输入内容"
                ></el-input>
              </td>
              <td>
                表/视图英文名：
                <el-input
                  style="display: inline-block"
                  v-model="input.englishName"
                  placeholder="请输入内容"
                ></el-input>
              </td>
              <td>
                最近采集日期：
                <el-input
                  style="display: inline-block"
                  v-model="input.timeStamp"
                  placeholder="请输入内容"
                ></el-input>
              </td>
              <td>
                <LoginButton @click="searchTable()" style="margin-left: 50px" type="2" title="查询" />
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 结果图表 -->
        <div class="result">
          <table class="shadow">
            <thead>
              <tr>
                <td style="width: 50px">序号</td>
                <td>表/视图中文名</td>
                <td>表/视图英文名</td>
                <td>最近采集日期</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(t, index) in searchData?.length > 0 ? searchData : currentDatabase?.tables?.tableData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ t.table_comment }}</td>
                <td>{{ t.table_name }}</td>
                <td>{{ t.timeStamp }}</td>
                <td>
                  <a @click="this.showDetail(t)">详情</a>
                  <!-- 详情弹窗 -->
                  <el-dialog v-model="this.detailPage.show" title="详情页面" :modal="false" :before-close="handleClose">
                    <div
                      style="height: 1px; width: 100%; background-color: black"
                    ></div>
                    <div class="titleitems">
                      <span>表/视图名：{{ t.table_name }}</span>
                      <span>数据量(万)：{{ detailPage.totalData/10000 }}</span>
                      <span>字段总数：{{ detailPage.tableData?.length }}</span>
                      <span
                        >最近采集日期：{{ detailPage.recentCollectTime }}</span
                      >
                    </div>

                    <el-table
                      :data="this.detailPage.tableData"
                      border
                      height="240px"
                      width="500px"
                      :header-cell-style="{
                        background: '#eef1f6',
                        color: '#606266',
                      }"
                    >
                      <el-table-column type="index" label="序号" width="60px" />
                      <el-table-column prop="column_comment" label="中文名" />
                      <el-table-column prop="column_name" label="英文名" />
                      <el-table-column prop="data_type" label="类型" />
                      <el-table-column prop="character_maximum_length" label="长度" />
                    </el-table>
                  </el-dialog>

                  <a @click="this.showIncrement(t);getTableInfo(t.table_name)">增量</a>
                  <!-- 增量弹窗 -->
                  <el-dialog
                    style="overflow: hidden"
                    width="60%"
                    v-model="this.IncrementPage.show"
                    title="增量"
                    :before-close="handleClose"
                    :modal="false"
                  >
                    <span class="increment_tip"
                      >导出类型:txt、binary、xlsx、xls</span
                    >
                    <div
                      class="from_table"
                      style="height: 1px; width: 100%; background-color: black"
                    ></div>
                    <div style="height: 100%; overflow: hidden">
                      <div class="from_row">
                        <div class="row">
                          <span>增量字段：</span>
                          <el-select
                            v-model="IncrementPage.incrementValue"
                            class="m-2"
                            placeholder="Select"
                          >
                            <el-option
                              v-for="item in incrementField"
                              :key="item"
                              :label="item"
                              :value="item"
                            />
                          </el-select>
                        </div>
                        <div class="row">
                          <span>导出类型：</span>
                          <el-select
                            v-model="IncrementPage.fieldValue"
                            class="m-2"
                            placeholder="Select"
                          >
                            <el-option
                              v-for="item in IncrementPage.extendType"
                              :key="item"
                              :label="item"
                              :value="item"
                            />
                          </el-select>
                        </div>
                      </div>
                      <div class="from_row">
                        <div class="row">
                          <span style="padding-left: 15px">开始值：</span>
                          <input />
                        </div>
                        <div class="row">
                          <span>结束值：</span>
                          <input />
                        </div>
                      </div>

                      <!-- <div style="float: left; margin-top: 30px">
                        <span>导出路径：</span>
                        <input
                          style="height: 30px; width: 565px; margin-right: 5px"
                        />
                        <el-button type="primary">选择导出路段</el-button>
                      </div> -->

                      <div
                        style="
                          display: flex;
                          align-items: center;
                          float: left;
                          margin-top: 40px;
                        "
                      >
                        <span style="display: inline-block">过滤条件：</span>
                        <textarea
                          style="display: inline-block"
                          rows="5"
                          cols="100"
                          v-model="this.IncrementPage.fieldSql"
                        ></textarea>
                      </div>

                      <div
                        style="
                          float: left;
                          margin-left: 360px;
                          margin-top: 12px;
                        "
                      >
                        <el-button type="primary" @click="getTableILoad(t.table_name)">导出</el-button>
                      </div>
                      <div style="float: left; margin-top: 50px">
                        <span style="margin-left: -60px">导出详情</span>
                      </div>
                      <div class="demo-progress" style="float: left">
                        <span style="display: inline-block; line-height: 34px"
                          >进度：</span
                        >
                        <el-progress
                          :percentage="50"
                          :text-inside="true"
                          :stroke-width="15"
                          striped
                          striped-flow
                        />
                      </div>

                      <div style="display: flex; float: left; margin-top: 50px">
                        <span style="display: inline-block">导出日志：</span>
                        <textarea
                          style="display: inline-block"
                          rows="5"
                          cols="100"
                        ></textarea>
                      </div>
                    </div>
                  </el-dialog>

                  <a @click="this.fullDataPage.show = true;getTableInfo(t.table_name)">全量</a>
                  <!-- 全量页面 -->
                  <el-dialog v-model="this.fullDataPage.show" title="全量" :modal="false" :before-close="handleClose">
                    <el-form label-width="120px">
                      <!-- <el-form-item label="导出路径：">
                        <el-input v-model="fullDataPage.filepath"/>
                      </el-form-item> -->
                      <el-form-item label="导出类型：">
                        <el-select v-model="fullDataPage.fileType">
                          <el-option
                            :key="0"
                            label="txt"
                            value="txt"
                          />
                          <el-option
                            :key="1"
                            label="binary"
                            value="binary"
                          />
                          <el-option
                            :key="2"
                            label="xlsx"
                            value="xlsx"
                          />
                          <el-option
                            :key="3"
                            label="xls"
                            value="xls"
                          />
                        </el-select>
                        <div style="margin-left: 180px">
                          <el-button
                            type="primary"
                            @click="fullDataPage.selectExtendPage.show = true;"
                            >选择导出字段</el-button
                          >
                          <el-dialog
                            v-model="fullDataPage.selectExtendPage.show"
                            title="选择导出字段"
                            :modal="false"
                            
                          >
                            <div
                              style="
                                width: 100%;
                                height: 1px;
                                background-color: black;
                              "
                            ></div>
                            <el-table height="300px" :data="fullDataPage.fieldList">
                              <el-table-column
                                width="70px"
                                type="index"
                                label="序号"
                              >
                              </el-table-column>
                              <el-table-column prop="column_comment" label="中文名" />
                              <el-table-column prop="column_name" label="英文名" />
                              <el-table-column prop="data_type" label="类型" />
                              <el-table-column prop="character_maximum_length" label="长度" />
                              <el-table-column width="40px">
                                <template #default="{ row }">
                                  <el-checkbox v-model="row.isChecked" />
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-dialog>
                        </div>
                      </el-form-item>
                      <el-form-item label="过滤条件：">
                        <el-input type="textarea" v-model="fullDataPage.filterSql"/>
                      </el-form-item>
                      <el-form-item>
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            margin-left: 180px;
                          "
                        >
                          <el-button style="width: 60px" type="primary" @click="getTableFLoad(t.table_name)"
                            >导出</el-button
                          >
                          <span>导出详情</span>
                        </div>
                      </el-form-item>
                      <el-form-item label="进度：" class="progress_item">
                        <div class="demo-progress">
                          <el-progress
                            :text-inside="true"
                            striped-flow
                            :percentage="0"
                            :stroke-width="15"
                            striped
                          />
                        </div>
                      </el-form-item>
                      <el-form-item label="导出日志：">
                        <el-input type="textarea" />
                      </el-form-item>
                    </el-form>
                  </el-dialog>
                  <a @click="showHistory(t.table_name)">历史</a>
                  <!-- 历史记录 -->
                  <el-dialog
                    width="65%"
                    v-model="historyNotePage.show"
                    title="历史记录"
                    :modal="false"
                    :before-close="handleClose"
                  >
                    <div
                      style="width: 100%; height: 1px; background-color: black"
                    ></div>
                    <div>
                      <el-form label-width="80px" size="large">
                        <el-form-item>
                          <el-col :span="8">
                            <span width="100px">采集字段(个)：</span>
                          </el-col>
                          <el-col :span="8">
                            <span width="100px">采集数据总量：</span>
                          </el-col>
                          <el-col :span="8">最近采集日期：{{ historyNotePage.recentCollectTime }}</el-col>
                        </el-form-item>
                        <el-form-item>
                          <el-col :span="8">
                            <div style="display: flex; flex-wrap: nowrap">
                              <span span="100px">采集日期：</span>
                              <el-input v-model="historyNotePage.timeStamp" />
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div style="display: flex; flex-wrap: nowrap; margin-left: 10px;">
                              <span width="100px">是否成功：</span>
                              <el-select v-model="historyNotePage.state">
                                <el-option
                                  :key="1"
                                  label="成功"
                                  :value="1"
                                />
                                <el-option
                                  :key="0"
                                  label="失败"
                                  :value="0"
                                />
                                <el-option
                                  :key="2"
                                  label="全部"
                                  :value="2"
                                />
                              </el-select>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <el-button type="primary" style="margin-left: 10px;" @click="getHistory(t.table_name)">查询</el-button>
                          </el-col>
                        </el-form-item>
                      </el-form>
                    </div>
                    <el-table
                      height="300px"
                      width="500px"
                      style="overflow-x: auto;"
                      :data="historyNotePage.tableData"
                      :header-cell-style="{
                        background: '#eef1f6',
                        color: '#606266',
                      }"
                    >
                      <el-table-column
                        width="70px"
                        type="index"
                        label="序号"
                      ></el-table-column>
                      <el-table-column
                        label="表/视图中文名"
                        prop="tableComment"
                        width="180px"
                      ></el-table-column>
                      <el-table-column
                        label="表/视图英文名"
                        prop="tableName"
                        width="220px"
                      ></el-table-column>
                      <el-table-column
                        label="字段总数"
                        prop="fieldNum"
                        width="100px"
                      ></el-table-column>
                      <el-table-column
                        label="数据量"
                        prop="dataNum"
                        width:="170px"
                      ></el-table-column>
                      <el-table-column
                        label="采集日期"
                        prop="timeStamp"
                        width="240px"
                      ></el-table-column>
                      <el-table-column
                        label="状态"
                        prop="state"
                        width="100px"
                      ></el-table-column>
                      <el-table-column
                        label="方式"
                        prop="way"
                        width="100px"
                      ></el-table-column>
                      <el-table-column waith="100px" label="详情">
                        <template #default="scope">
                          <a @click="historyNotePage.historyDetail.show = true;getHistoryInfo(scope.row.id)">
                            详情
                          </a>
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <!-- 详情页 -->
                        <el-dialog
                          style="text-align: center"
                          v-model="historyNotePage.historyDetail.show"
                          title="详情"
                          :modal="false"
                          
                        >
                          <div
                            style="
                              width: 100%;
                              height: 1px;
                              background-color: black;
                            "
                          ></div>
                          <div
                            style="display: flex; justify-content: space-around"
                          >
                            <span>导出类型：{{historyNotePage.historyDetail.info.type}}</span>

                            <span>过滤条件：{{historyNotePage.historyDetail.info.filterSql}}</span>
                          </div>

                          <h4>采集字段</h4>
                          <div>
                            <el-table
                              :data="historyNotePage.historyDetail.info.columns_info"
                              style="overflow-x: auto;"
                              height="260px"
                              width="400px"
                              :header-cell-style="{
                                background: '#eef1f6',
                                color: '#606266',
                              }"
                            >
                              <el-table-column label="序号" type="index" width="70px" ></el-table-column>
                              <el-table-column label="中文名" prop="column_comment"></el-table-column>
                              <el-table-column label="英文名" prop="column_name"></el-table-column>
                              <el-table-column label="类型" prop="data_type"></el-table-column>
                              <el-table-column label="长度" prop="character_maximum_length"></el-table-column>
                            </el-table>
                          </div>
                        </el-dialog>
                      </el-table-column>
                    </el-table>
                  </el-dialog>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页器 -->
          <div class="demo-pagination-block">
            <el-pagination
              :current-page="page.pageNum"
              :page-size="page.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
            
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginButton from "./LoginButton.vue";
import request from '@/utils/request';


export default {
  name: "DataPage",
  components: {
    LoginButton,
  },
  data() {
    return {
      currentDatabase: undefined,
      serverData:[],
      incrementalTables:[],
      searchData:[],
      input:{
        chineseName: '',
        englishName: '',
        isSearch: false,
        timeStamp: ''
      },
      page:{
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      //详情页面数据
      detailPage: {
        show: false,
        tableName: "",
        totalData: "",
        totalField: "",
        recentCollectTime: "",
        tableData: [
          {
            chineseName: "主键ID",
            englishName: "id",
            type: "INT_UNSIGNED",
            fontLength: "10",
          },
          {
            chineseName: "行政代码",
            englishName: "code_id",
            type: "VARCHAR",
            fontLength: "50",
          },
        ],
      },
      //增量页面数据
      IncrementPage: {
        show: false,
        extendType: ["txt", "binary", "xlsx", "xls"],
        fieldList:[],
        fieldSql:"",
        fieldValue: undefined,
        incrementValue:undefined,
      },
      //全量页面数据
      fullDataPage: {
        show: false,
        fileType: "",
        filepath: '',
        filterSql: "",
        fieldList:[],
        //选择导出字段
        selectExtendPage: {
          show: false,
        },
      },
      //历史记录页面数据
      historyNotePage: {
        timeStamp:'',
        show: false,
        state: 2,
        tableData: [
          {
            chineseName: "城市代码表",
            englishName: "code_gb_degree",
            totalField: "3",
            totalData: "0.0004",
            collectTime: "2022.5.11 17:54",
            status: "成功",
            way: "全量",
          },
          {
            chineseName: "城市代码表",
            englishName: "code_gb_degree",
            totalField: "3",
            totalData: "0.0004",
            collectTime: "2022.5.11 12:31",
            status: "成功",
            way: "全量",
          },
        ],
        //历史详情
        historyDetail: {
          show: false,
          info:[],
        },
      },
      props:{
        label:'label',
        children:'children'
      }
    };
  },
  computed:{
    /* 分好类别的serverData */
    db(){
      let fmData = {}

      /* 遍历服务器传来的数据源信息 */
      this.serverData.forEach(element => {
        switch (element.dbType) {
          case 'mysql':
            element.dbType = 'Mysql'
            break;
          case 'oracle':
            element.dbType = 'Oracle'
            break;
          case 'sqlserver':
            element.dbType = 'SqlServer'
            break;
          default:
            if(element.dbType && element.dbType.length > 0){
              element.dbType = element.dbType[0].toUpperCase() + element.dbType.slice(1).toLowerCase()
            }
            break;
        }

        /* 如果fmData有与该数据源相匹配的属性名 */
        if(fmData[element.dbType]){
          if(fmData[element.dbType][element.systemName]){
            fmData[element.dbType][element.systemName].push(element)
          }else{
            fmData[element.dbType][element.systemName] = []
            fmData[element.dbType][element.systemName].push(element)
          }
        /* 如果fmData没有与该数据源相匹配的属性名 */
        }else{
          fmData[element.dbType] = {}
          fmData[element.dbType][element.systemName] = []
          fmData[element.dbType][element.systemName].push(element)
        }
      });

      return fmData
    },
    treeData(){
      if(!this.serverData)
        return undefined

      let r = []
      /* 数据库类型 */
      for (let key in this.db) {
        let node = {}
        let children = []

        node.label = key
        /* 数据库系统名称 */
        for (let key2 in this.db[key]) {
          let node2 = {}
          let children2 = []

          node2.label = key2
          /* 数据库名 */
          this.db[key][key2].forEach((e) => {
            let node3 = {}
            node3.label = e.dbName
            node3.data = e
            children2.push(node3)
          })

          node2.children = children2
          children.push(node2)
        }

        node.children = children
        r.push(node)
      }

      return r
    },
    //增量字段
    incrementField(){
      let arrType=[];
      this.IncrementPage.fieldList.forEach(item=>{
        arrType.push(item.column_name)
      })
      let arrTypeCopy = Object.assign([], arrType);
      return arrTypeCopy;
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;

      if(this.input.isSearch)
        this.searchTable()
      else
        this.getTables()
      
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;

      if(this.input.isSearch)
        this.searchTable()
      else
        this.getTables()
    },
    //展示详情页
    showDetail(data) {
      this.detailPage.show = true;
      this.detailPage.tableName = data.englishName;
      this.detailPage.totalField = this.detailPage.tableData.length;
      this.detailPage.recentCollectTime = data.date;

      this.getTableInfo(data.table_name)
    },
    //展示增量页面
    showIncrement(data) {
      this.IncrementPage.show = true;
      console.log(data);
    },
    //展示历史记录页面
    showHistory(tableName) {
      this.historyNotePage.show = true
      this.getHistory(tableName)
    },
    handleClose(done){
      this.IncrementPage.show=false;
      this.detailPage.show=false;
      this.fullDataPage.show=false;
      this.historyNotePage.show=false;
      done();
    },
    getAllSource(){
      request.get('/newapi/data/getAllSource').then(
        res => {
          /* console.log(res.data); */
          this.serverData = res.data
        },
        error => {console.log(error);}
      )
    },
    /* 选择数据库 */
    handleNodeClick(obj, node){
      if(!node.isLeaf)
        return

      this.currentDatabase = node.data.data
      this.link()
    },
    /* 连接服务器 */
    link(){
      request.post("newapi/table/linkDB", {
        dbInfo: this.currentDatabase.dbInfo,
        dbIp: this.currentDatabase.dbIp,
        dbName: this.currentDatabase.dbName,
        dbPort: this.currentDatabase.dbPort,
        dbType: this.currentDatabase.dbType,
        id: this.currentDatabase.id,
        pageNum: 1,
        pageSize: 100,
        password: this.currentDatabase.password,
        systemName: this.currentDatabase.systemName,
        userName: this.currentDatabase.userName
      }).then(
        () => {
          this.getTables()
        },
        error => {
          console.log(error);
        }
      )
    },
    /* 分开普通表和增量表 */
    /* sliceTableAndIncremental(tables){
      this.incrementalTables = tables?.filter((e) => {
        return e.table_name?.lastIndexOf("_incremental") == e.table_name?.length - "_incremental".length
      })
      this.currentDatabase.tables.tableData = tables?.filter((e) => {
        return e.table_name?.lastIndexOf("_incremental") != e.table_name?.length - "_incremental".length
      })
    }, */
    /* 获取数据库所有表信息 */
    getTables(){
      request.post("newapi/table/table", {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        tableComment: "",
        tableName: ""
      }).then(
        res => {
          console.log('@',res.data);
          this.currentDatabase.tables = res.data
          /* this.sliceTableAndIncremental(res.data?.tableData) */
          this.searchData = []
          this.page.total = res.total
          this.input.chineseName = ''
          this.input.englishName = ''
          this.input.date = ''
          this.input.isSearch = false
        },
        error => {
          console.log(error);
        }
      )
    },
    /* 搜索数据库中的表 */
    searchTable(){
      request.post("newapi/table/table", {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        tableComment: this.input.chineseName,
        tableName: this.input.englishName,
        timeStamp: this.input.timeStamp
      }).then(
        res => {
          this.searchData = res.data?.tableData
          this.page.total = res.total
          this.input.isSearch = true
        },
        error => {
          console.log(error);
        }
      )
    },
    /* 获取某张表的信息 */
    getTableInfo(tableName){

      request.get("newapi/table/tableinfo", {params:{
        tableName
      }}).then(
        res => {
          this.detailPage.tableData = res.data?.columns_info
          this.fullDataPage.fieldList = res.data?.columns_info
          this.IncrementPage.fieldList = res.data?.columns_info
          this.detailPage.totalData = res.data?.total_rows
          this.detailPage.recentCollectTime = res.data?.timeStamp
        },
        error => {
          console.log(error);
        }
      )
    },
    /* 获取某张表的增量 */
    getTableILoad(tableName){
      let fieldNames=[]
      fieldNames[0]=this.IncrementPage.incrementValue
      let fileType= this.IncrementPage.fieldValue;
      let fieldSql= this.IncrementPage.fieldSql;

      if(!fileType || !fieldNames[0]){
        this.$message({
          message:'请先填写需导出的信息！',
          type: 'error'
        })
        return
      }

      request.post("newapi/table/ILoad", {
        fieldNames,
        fileType,
        fieldSql,
        tableName
      }).then(
        res => { 
          this.export(res.data) 
          console.log(res);
        },
        error => { console.log(error.message); }
      )
      
    },
    getFieldNames(data){
      let n = []

      data?.forEach(element => {
        if(element.isChecked){
          n.push(element.column_name)
        }
      })

      return n
    },
    /* 获取某张表的全量 */
    getTableFLoad(tableName){
      let fieldNames = this.getFieldNames(this.fullDataPage.fieldList)

      if(this.fullDataPage.fileType == "" || fieldNames?.length == 0){
        this.$message({
          message:'请先填写需导出的信息！',
          type: 'error'
        })
        return
      }

      request.post("newapi/table/FLoad", {
        fieldNames,
        fileType: this.fullDataPage.fileType,
        filepath: this.fullDataPage.filepath,
        filterSql:this.fullDataPage.filterSql,
        tableName,
      }).then(
        res => { 
          this.export(res.data) 
          console.log(res);
        },
        error => { console.log(error.message); }
      )
    },
    /* 导出 */
    export(data){
      if(!data || !data?.headers){
        this.$message({
          message:'数据导出错误！',
          type: 'error'
        })
        return
      }
        

      const disposition = data?.headers['Content-Disposition']
      let fileName = disposition[0]?.substring(disposition[0]?.indexOf('filename=') + 10, disposition[0]?.length-1);
      
      let bstr = atob(data.body)
      let n = bstr.length
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n); //返回字符串第一个字符的 Unicode 编码
      }

      let url = window.URL.createObjectURL(new Blob([u8arr]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link)
    },
    /* 历史记录 */
    getHistory(tableName){
      request.post("newapi/table/history", {
        pageNum: 1,
        pageSize: 999,
        state: this.historyNotePage.state,
        tableName,
        timeStamp: this.historyNotePage.timeStamp
      }).then(
        res => { 
          console.log(res.data); 
          this.historyNotePage.tableData = res.data.pageData
          this.historyNotePage.recentCollectTime = res.data.timeStamp
          this.historyNotePage.tableData.forEach(element => {
            element.state = element.state == 0 ? '失败' : '成功'
          })
        },
        error => { console.log(error.message); }
      )
    },
    /* 历史记录详情 */
    getHistoryInfo(id){
      request.get("newapi/table/exportinfo", {
        params: {historyId: id,}
      }).then(
        res => { 
          console.log(res.data); 
          this.historyNotePage.historyDetail.info = res.data
        },
        error => { console.log(error.message); }
      )
    },
  },
  mounted(){
    this.getAllSource()
  }
};
</script>

<style scoped lang="less">
.right {
  width: 80%;
  min-height: 800px;
  box-sizing: border-box;
}
.left {
  width: 20%;
  min-height: 800px;
  padding-right: 20px;
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.result {
  a {
    margin-right: 10px;
  }

  table {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 10px;
    width: 97%;
    background-color: rgb(199, 199, 199);
    border-radius: 10px;
    border-collapse: collapse;
    overflow: hidden;
    table-layout: fixed;
    overflow: hidden;
  }

  tbody tr:nth-child(2n + 1) {
    background-color: rgb(228, 228, 228);
  }

  tbody tr:hover {
    background-color: rgb(255, 255, 255);
  }

  tr {
    height: 50px;
  }

  tr td {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  thead {
    font-weight: bold;
  }
}
a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.titleitems {
  margin-bottom: 30px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: 50px, 280px;
  span {
    margin-top: 30px;
  }
}
.increment_tip {
  color: red;
  position: absolute;
  top: 20px;
  right: 50px;
}

.from_row {
  margin-top: 10px;
}
.row select,
.row input {
  height: 25px;
  width: 200px;
}
.row {
  margin-top: 10px;
}
.row:nth-child(1) {
  float: left;
}
.row:nth-child(2) {
  float: right;
}
.demo-progress {
}
input {
  font-size: 12px;
}
.demo-progress {
  .el-progress--line {
    margin-top: 80px;
    width: 650px;
    display: inline-block;
    margin-left: 20px;
  }
}
.progress_item .demo-progress .el-progress--line {
  margin-top: 10px;
  width: 500px;
}
span {
  white-space: nowrap;
}

.demo-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
